import { EyeOutlined } from "@ant-design/icons";
import { useEffect, useState, useRef } from "react";
import { IEditorConfig } from "@wangeditor/editor";
import { Editor } from "@wangeditor/editor-for-react";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import articleContentLess from "./index.module.less";
const ArticleContent = (prop: any) => {
  // 编辑器配置
  const editorConfig: Partial<IEditorConfig> = {
    readOnly: true,
  };
  const articleRef = useRef(null);
  const [selectedText, setSelectedText] = useState("");
  const [showTabs, setShowTabs] = useState(false);
  const [position, setPosition] = useState({ top: 0, left: 0 });
  useEffect(() => {
    // 创建一个处理鼠标释放事件的函数
    const handleMouseUp = () => {
      const selection = window.getSelection(); // 获取选中的文本
      const selectedText = selection?.toString() || ""; // 转换为字符串
      // 获取文章内容容器
      if (selectedText) {
        // 获取选中的文本的位置
        const range = selection?.getRangeAt(0);
        const rect: any = range?.getBoundingClientRect();
        const articleContent: any = articleRef.current;
        if (articleContent && articleContent.contains(selection?.anchorNode)) {
          setPosition({
            top: rect.top + window.scrollY - 40, // 显示在选中区域的上方
            left: rect.left + window.scrollX,
          });
          setSelectedText(selectedText); // 更新状态
          setShowTabs(true); // 显示Tab选择框
        }
      } else {
        setTimeout(() => {
          setShowTabs(false);
          console.log(6666);
        }, 100);
      }
    };

    // 监听 mouseup 事件
    window.addEventListener("mouseup", handleMouseUp);

    // 清理事件监听器
    return () => {
      window.removeEventListener("mouseup", handleMouseUp);
    };
  }, []);

  const AiExplanation = () => {
    console.log(6666);
    prop.sendAiExplanation(selectedText);
    setShowTabs(false);
  };

  return (
    <>
      <div className={articleContentLess.articleContent_content_all}>
        <div className="articleContent_title">
          {prop.ArticleInfo?.ArticleTitle}
        </div>
        <div className="article_other_message">
          <div className="name">{prop.AuthorMessage?.UserName}</div>
          <div className="time">{prop.ArticleInfo?.PublishTime}</div>
          <div className="lookNum">
            <div className="icon">
              <EyeOutlined />
            </div>
            <div className="num">6813</div>
          </div>
        </div>
        <div className="articleContent_content" ref={articleRef}>
          <Editor
            defaultConfig={editorConfig}
            value={prop.ArticleInfo?.ArticleContent}
            mode="default"
            style={{ height: "100%", overflow: "hidden" }}
          />
          {showTabs && (
            <div
              className="TabsAll"
              style={{
                position: "absolute",
                top: position.top,
                left: position.left,
              }}
            >
              <div className="left" onClick={AiExplanation}>
                <div className="img">
                  <img src="/public/img/ai.png" alt="" />
                </div>
                <div className="btn">AI解释</div>
              </div>
              <div className="close iconfont icon-shanchu"></div>
            </div>
          )}
        </div>
      </div>
    </>
  );
};

export default ArticleContent;
